<!DOCTYPE html>
<html lang="ZH">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
    <input type="button" value="跑马灯" @click="lang">
    <input type="button" value="停止" @click="stop">

</div>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '跑马灯啊跑马灯~~~~~~~~~',
            btn: "this is a button",
            timer: ''
        },
        methods: {
            lang: function () {
                //第一个字符变成最后一个字符，实现跑马灯的效果
                this.msg = this.msg.substring(1) + this.msg.substring(0, 1);
                //定时器循环执行
                if(!this.timer) {
                    this.timer = setInterval(() => {
                        //将定时器赋值给langa，方便stop方法停止
                        this.msg = this.msg.substring(1) + this.msg.substring(0, 1);
                    } , 100);
                }

            },
            stop: function () {
                clearInterval(this.timer);
                this.timer = ''
            },
        }
    })
</script>
</body>
</html>